<template>
<el-col :span="24" v-if="secondaryMenus.length>0">
  <el-menu :default-active="activeItemId" class="el-menu-vertical-demo"  theme="dark" :router="true" :unique-opened="true">

    <template v-for="(item, index) in secondaryMenus">
        <template v-if="item.isLeaf">
          <el-menu-item :index="item.id" :route='{path: item.path}'>{{item.title}}</el-menu-item>
        </template>
        <template v-else>
          <el-submenu :index="item.id">
             <template slot="title">{{item.title}}</template>
             <template v-for="(item1, index1) in item.children">
              <el-menu-item :index="item1.id" :route='{path: item1.path}'>{{item1.title}}</el-menu-item>
             </template>
          </el-submenu>
        </template>
    </template>

  </el-menu>
</el-col>
</template>

<script>
  import {menu_by_path, menu_children, menu_root_by_path} from '~/utils/menu_helpers'

  export default {
    name: 'secondary-menu',
    data() {
      return {
        secondaryMenus: []
      }
    },
    created() {
      let menus = this.$store.state.permission.menus
      let matched = this.$route.matched
      let rootId = menu_root_by_path(menus, matched[matched.length-1].path)
      this.secondaryMenus = menu_children(menus, rootId)
    },
    computed: {
      activeItemId() {
        let matched = this.$route.matched
        let item = menu_by_path(this.$store.state.permission.menus, matched[matched.length-1].path)
        let itemId = -1
        if (item) {
          if (item.isLeaf && !item.isHidden) {
            itemId = item.id
          } else {
            itemId = item.parentId
          }
        }
        return itemId
      }
    }
  }
</script>
